<template>
  <section class="relaxation-section">
    <div class="section-decorations">
      <div class="decoration-circle primary"></div>
      <div class="decoration-circle secondary"></div>
      <div class="decoration-circle tertiary"></div>
      <div class="animated-shape">
        <div class="floating-heart">💕</div>
        <div class="floating-heart">💖</div>
        <div class="floating-heart">💝</div>
      </div>
    </div>
    <div class="container">
      <h2 class="section-title">🧘 心灵放松练习</h2>
      <p class="section-intro">
        温柔地照顾自己，让我们一起踏上内心平静的旅程，找回那个安宁的自己
      </p>
      <div class="relaxation-categories">
        <button 
          v-for="category in categories" 
          :key="category.value"
          :class="['category-btn', { active: selectedCategory === category.value }]"
          @click="selectedCategory = category.value">
          {{ category.label }}
        </button>
      </div>
      <div class="relaxation-content">
        <div class="exercises-grid">
          <div 
            v-for="exercise in filteredExercises" 
            :key="exercise.id"
            class="exercise-card"
            @click="openExercise(exercise)"
            @mouseenter="hoveredCard = exercise.id"
            @mouseleave="hoveredCard = null">
            <div class="exercise-image"
                 :style="{ backgroundColor: exercise.color }"
                 :class="{ 'hovered': hoveredCard === exercise.id }">
              <div class="exercise-icon">{{ exercise.icon }}</div>
            </div>
            <div class="exercise-info">
              <h3 class="exercise-title">{{ exercise.title }}</h3>
              <p class="exercise-description">{{ exercise.description }}</p>
              <div class="exercise-meta">
                <span class="exercise-duration">⏱️ {{ exercise.duration }}分钟</span>
                <span class="exercise-level">🎯 {{ getLevelText(exercise.level) }}</span>
              </div>
            </div>
          </div>
        <div v-if="filteredExercises.length === 0" class="no-exercises">
          该分类下暂无练习内容，敬请期待~ 🤗
        </div>
        </div>
      </div>
    </div>
    </section>
    
    <!-- 练习详情模态框 -->
    <div v-if="currentExercise" class="modal-overlay" @click.self="closeExercise">
      <div class="modal-content">
        <button class="close-btn" @click="closeExercise">×</button>
        <div class="exercise-modal-header"
             :style="{ backgroundColor: currentExercise.color }">
          <div class="modal-icon floating">{{ currentExercise.icon }}</div>
          <h2 class="modal-title">{{ currentExercise.title }}</h2>
          <p class="modal-subtitle">让我们开始这段心灵放松之旅吧✨</p>
        </div>
        <div class="exercise-modal-body">
          <div class="exercise-instructions">
            <h3>💫 练习步骤</h3>
            <ol>
              <li v-for="(step, index) in currentExercise.steps" :key="index" class="step-item"
                   :style="{ animationDelay: `${index * 0.1}s` }">
                <span class="step-number">{{ index + 1 }}</span>
                <span class="step-text">{{ step }}</span>
              </li>
            </ol>
          </div>
          <div class="exercise-benefits">
            <h3>🌈 练习益处</h3>
            <ul class="benefits-list">
              <li v-for="(benefit, index) in currentExercise.benefits" :key="index" class="benefit-item"
                   :style="{ animationDelay: `${index * 0.15}s` }">
                <span class="benefit-icon">✨</span>
                <span class="benefit-text">{{ benefit }}</span>
              </li>
            </ul>
          </div>
          <div v-if="currentExercise.type === 'breathing' || currentExercise.type === 'meditation'"
               class="exercise-timer">
            <h3>⏱️ 练习计时器</h3>
            <div class="timer-container">
              <div class="timer-circle">
                <div class="timer-display">{{ formattedTime }}</div>
              </div>
              <div class="timer-actions">
                <button v-if="!isTimerRunning" class="primary-btn" @click="startTimer">开始练习 🎯</button>
                <button v-else class="secondary-btn" @click="pauseTimer">暂停 ⏸️</button>
                <button class="secondary-btn" @click="resetTimer">重置 🔄</button>
              </div>
            </div>
          </div>
          <div v-if="currentExercise.audioUrl" class="exercise-audio">
            <h3>🎵 引导音频</h3>
            <audio controls :src="currentExercise.audioUrl" class="audio-player">
              您的浏览器不支持音频播放。
             </audio>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'RelaxationView',
  data() {
    return {
      selectedCategory: 'all',
      currentExercise: null,
      hoveredCard: null,
      isTimerRunning: false,
      timerSeconds: 0,
      timerInterval: null,
      categories: [
        { label: '全部练习', value: 'all' },
        { label: '呼吸练习', value: 'breathing' },
        { label: '冥想', value: 'meditation' },
        { label: '肌肉放松', value: 'muscle' },
        { label: '正念', value: 'mindfulness' }
      ],
      exercises: [
        {
          id: 1,
          title: '4-7-8呼吸法',
          description: '一种简单有效的深呼吸技巧，帮助快速缓解焦虑和压力',
          type: 'breathing',
          duration: 5,
          level: 'beginner',
          color: '#4a6fa5',
          icon: '💨',
          steps: [
            '找一个舒适的坐姿或躺姿',
            '完全呼出肺部的空气',
            '闭上嘴巴，用鼻子吸气，心中默数4秒',
            '屏住呼吸，心中默数7秒',
            '用嘴巴呼气，发出"呼"的声音，心中默数8秒',
            '重复上述步骤3-4个循环'
          ],
          benefits: [
            '快速缓解焦虑和压力',
            '帮助改善睡眠质量',
            '降低心率和血压',
            '增强情绪稳定性'
          ]
        },
        {
          id: 2,
          title: '渐进式肌肉放松',
          description: '通过有意识地收紧和放松肌肉群来达到全身放松的效果',
          type: 'muscle',
          duration: 15,
          level: 'intermediate',
          color: '#6b8eaf',
          icon: '💪',
          steps: [
            '从脚趾开始，用力收紧肌肉5秒',
            '突然放松，感受肌肉放松的感觉15秒',
            '依次向上：小腿、大腿、臀部、腹部、胸部、手臂、肩膀、颈部、面部',
            '每个部位都重复收紧5秒，放松15秒的过程',
            '完成后，感受全身放松的状态'
          ],
          benefits: [
            '缓解肌肉紧张和身体疼痛',
            '降低压力激素水平',
            '改善睡眠质量',
            '增强身体意识'
          ]
        },
        {
          id: 3,
          title: '正念冥想',
          description: '关注当下的体验，不带评判地观察自己的想法和感受',
          type: 'meditation',
          duration: 10,
          level: 'beginner',
          color: '#f9a826',
          icon: '🧘',
          steps: [
            '找一个安静的地方，舒适地坐下',
            '轻轻闭上眼睛或保持柔和的目光',
            '将注意力集中在呼吸上，感受空气进出身体的感觉',
            '当注意力分散时，温和地将它带回呼吸',
            '持续练习，逐渐延长时间'
          ],
          benefits: [
            '减少焦虑和抑郁症状',
            '提高专注力和注意力',
            '增强情绪调节能力',
            '改善整体心理健康'
          ]
        },
        {
          id: 4,
          title: '身体扫描冥想',
          description: '系统性地关注身体各个部位的感受，促进深度放松',
          type: 'meditation',
          duration: 20,
          level: 'intermediate',
          color: '#6bcb77',
          icon: '🔍',
          steps: [
            '平躺下来，闭上眼睛',
            '从脚趾开始，逐步向上关注每个身体部位的感受',
            '注意但不试图改变任何感觉：紧张、温暖、刺痛等',
            '如果某个部位感到紧张，想象呼吸进入该部位并释放紧张',
            '完成全身扫描后，感受整体的放松状态'
          ],
          benefits: [
            '减轻身体紧张和压力',
            '增强身心连接',
            '改善睡眠质量',
            '培养对身体的觉知'
          ]
        },
        {
          id: 5,
          title: '箱式呼吸法',
          description: '军队和执法人员常用的呼吸技巧，有助于快速恢复冷静',
          type: 'breathing',
          duration: 5,
          level: 'beginner',
          color: '#ff6b6b',
          icon: '📦',
          steps: [
            '找一个舒适的坐姿',
            '吸气4秒',
            '屏住呼吸4秒',
            '呼气4秒',
            '屏住呼吸4秒（呼气后）',
            '重复4-5个循环'
          ],
          benefits: [
            '快速恢复情绪稳定',
            '提高专注力',
            '降低血压',
            '增强意志力'
          ]
        },
        {
          id: 6,
          title: '正念行走',
          description: '将正念融入日常行走中，随时随地都能练习的放松方式',
          type: 'mindfulness',
          duration: 15,
          level: 'beginner',
          color: '#9b59b6',
          icon: '🚶',
          steps: [
            '选择一个安全、安静的地方行走',
            '放慢脚步，关注脚部抬起、移动和落地的感觉',
            '感受身体的移动、重心的转移',
            '注意周围的环境：声音、气味、触觉',
            '当思绪飘走时，温和地将注意力带回行走的体验'
          ],
          benefits: [
            '缓解久坐带来的身体紧张',
            '提高当下的觉知',
            '改善情绪状态',
            '随时随地都可练习'
          ]
        },
        {
          id: 7,
          title: '5-4-3-2-1感官练习',
          description: '通过调动五感来缓解焦虑和恐慌，重回当下',
          type: 'mindfulness',
          duration: 3,
          level: 'beginner',
          color: '#ff7979',
          icon: '👁️👂👃👅👐',
          steps: [
            '识别并说出5个你能看到的事物',
            '识别并说出4个你能触摸到的事物',
            '识别并说出3个你能听到的声音',
            '识别并说出2个你能闻到的气味',
            '识别并说出1个你能尝到的味道',
            '深呼吸几次，感受当下的平静'
          ],
          benefits: [
            '快速缓解焦虑和恐慌发作',
            '帮助回到当下',
            '增强感官觉知',
            '可在任何时间、任何地点进行'
          ]
        },
        {
          id: 8,
          title: '引导式冥想：宁静湖泊',
          description: '通过想象宁静的自然场景来达到放松和减压的效果',
          type: 'meditation',
          duration: 20,
          level: 'beginner',
          color: '#00cec9',
          icon: '🏞️',
          steps: [
            '舒适地坐下或躺下，闭上眼睛',
            '做几次深呼吸，放松身体',
            '想象自己来到一个宁静的湖泊边',
            '详细描绘这个场景：湖水的颜色、周围的植物、天空的颜色',
            '感受阳光温暖你的皮肤，微风轻拂你的脸颊',
            '在这个宁静的地方停留一段时间',
            '当准备结束时，慢慢将注意力带回当下，睁开眼睛'
          ],
          benefits: [
            '减轻压力和焦虑',
            '改善情绪状态',
            '增强想象力和创造力',
            '提供心理逃避空间'
          ]
        }
      ]
    }
  },
  computed: {
    filteredExercises() {
      if (this.selectedCategory === 'all') {
        return this.exercises
      }
      return this.exercises.filter(exercise => exercise.type === this.selectedCategory)
    },
    formattedTime() {
      const minutes = Math.floor(this.timerSeconds / 60)
      const seconds = this.timerSeconds % 60
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    }
  },
  beforeUnmount() {
    this.stopTimer()
  },
  methods: {
    getLevelText(level) {
      const levels = {
        beginner: '初学者',
        intermediate: '中级',
        advanced: '高级'
      }
      return levels[level] || level
    },
    openExercise(exercise) {
      this.currentExercise = { ...exercise }
      this.resetTimer()
    },
    closeExercise() {
      this.currentExercise = null
      this.stopTimer()
    },
    startTimer() {
      if (!this.isTimerRunning) {
        this.isTimerRunning = true
        this.timerInterval = setInterval(() => {
          this.timerSeconds++
        }, 1000)
      }
    },
    pauseTimer() {
      this.isTimerRunning = false
      if (this.timerInterval) {
        clearInterval(this.timerInterval)
        this.timerInterval = null
      }
    },
    resetTimer() {
      this.pauseTimer()
      this.timerSeconds = 0
    },
    stopTimer() {
      this.pauseTimer()
    }
  }
}
</script>

<style scoped>
.relaxation-section {
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
}

.section-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
  animation: float 18s ease-in-out infinite;
}

.decoration-circle.primary {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--primary-light), transparent);
  top: -250px;
  right: -150px;
}

.decoration-circle.secondary {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--secondary-light), transparent);
  bottom: -200px;
  left: -100px;
  animation-delay: 4s;
}

.decoration-circle.tertiary {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--accent-color), transparent);
  top: 40%;
  left: -150px;
  animation-delay: 2s;
}

.animated-shape {
  position: absolute;
  top: 50%;
  right: 10%;
  pointer-events: none;
  z-index: 0;
}

.floating-heart {
  position: absolute;
  font-size: 24px;
  opacity: 0.6;
  animation: floatUp 8s ease-in-out infinite;
}

.floating-heart:nth-child(1) {
  top: 0;
  left: 0;
  animation-delay: 0s;
}

.floating-heart:nth-child(2) {
  top: 40px;
  left: 60px;
  animation-delay: 2s;
}

.floating-heart:nth-child(3) {
  top: 80px;
  left: 20px;
  animation-delay: 4s;
}

.container {
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 2.5rem;
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(123, 104, 238, 0.2);
}

.section-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
  font-size: 1.1rem;
  color: var(--text-color);
  line-height: 1.7;
  font-weight: 400;
}

.relaxation-categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
  padding: 0 1rem;
}

.category-btn {
  padding: 0.9rem 1.8rem;
  border: 2px solid var(--primary-color);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  color: var(--primary-color);
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.category-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  transition: var(--transition);
  z-index: -1;
}

.category-btn:hover::before,
.category-btn.active::before {
  left: 0;
}

.category-btn:hover,
.category-btn.active {
  color: white;
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.exercises-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.exercise-card {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid var(--light-border);
  position: relative;
}

.exercise-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.exercise-image {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.exercise-image.hovered {
  transform: scale(1.05);
}

.exercise-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.exercise-image:hover::after {
  opacity: 1;
}

.exercise-icon {
  font-size: 72px;
  transition: transform 0.3s ease;
}

.exercise-card:hover .exercise-icon {
  transform: scale(1.1) rotate(5deg);
}

.exercise-info {
  padding: 1.8rem;
}

.exercise-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.exercise-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), transparent);
  border-radius: 3px;
}

.exercise-description {
  margin-bottom: 1.2rem;
  line-height: 1.7;
  color: var(--text-color);
  font-size: 0.95rem;
}

.exercise-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-light);
}

.exercise-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.no-exercises {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-color);
  font-size: 1.1rem;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--light-border);
  grid-column: 1 / -1;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(123, 104, 238, 0.15);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background-color: white;
  border-radius: var(--radius-lg);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--light-border);
  animation: slideUp 0.4s ease;
}

.close-btn {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 26px;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-light);
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1) rotate(90deg);
}

.exercise-modal-header {
  color: white;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.exercise-modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
}

.modal-icon {
  font-size: 90px;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.modal-icon.floating {
  animation: float 3s ease-in-out infinite;
}

.modal-title {
  font-size: 2.2rem;
  margin: 0 0 0.8rem 0;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.modal-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
  position: relative;
  z-index: 1;
}

.exercise-modal-body {
  padding: 2.5rem;
}

.exercise-instructions,
.exercise-benefits,
.exercise-timer,
.exercise-audio {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background-color: var(--light-bg);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary-color);
}

.exercise-instructions h3,
.exercise-benefits h3,
.exercise-timer h3,
.exercise-audio h3 {
  color: var(--primary-color);
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.exercise-instructions ol {
  padding-left: 1rem;
  list-style: none;
}

.step-item {
  margin-bottom: 1.2rem;
  line-height: 1.7;
  display: flex;
  gap: 1rem;
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.9rem;
  box-shadow: var(--shadow-light);
}

.step-text {
  flex: 1;
  font-size: 1.05rem;
  color: var(--text-color);
}

.benefits-list {
  list-style: none;
  padding: 0;
}

.benefit-item {
  margin-bottom: 1rem;
  line-height: 1.7;
  display: flex;
  gap: 0.8rem;
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
  padding: 0.8rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-light);
}

.benefit-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.benefit-text {
  flex: 1;
  font-size: 1rem;
  color: var(--text-color);
  font-weight: 500;
}

.timer-container {
  text-align: center;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-light);
}

.timer-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(var(--primary-color) 0%, var(--primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  box-shadow: var(--shadow);
  position: relative;
}

.timer-circle::before {
  content: '';
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: white;
}

.timer-display {
  font-size: 3rem;
  font-weight: bold;
  color: var(--primary-color);
  position: relative;
  z-index: 1;
  font-family: 'Arial', sans-serif;
}

.timer-actions {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
  padding: 1rem 1.8rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.primary-btn {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  color: white;
  border: none;
}

.secondary-btn {
  background-color: white;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.secondary-btn:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.audio-player {
  width: 100%;
  border-radius: 50px;
  box-shadow: var(--shadow-light);
  transform: scale(1.05);
  transition: var(--transition);
}

.audio-player:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow);
}

/* 动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-150px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
  
  .exercises-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .relaxation-categories {
    gap: 0.8rem;
  }
  
  .category-btn {
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
  }
  
  .exercise-image {
    height: 150px;
  }
  
  .exercise-icon {
    font-size: 60px;
  }
  
  .modal-icon {
    font-size: 70px;
  }
  
  .modal-title {
    font-size: 1.8rem;
  }
  
  .timer-display {
    font-size: 2.5rem;
  }
  
  .timer-circle {
    width: 180px;
    height: 180px;
  }
  
  .timer-circle::before {
    width: 150px;
    height: 150px;
  }
  
  .exercise-modal-body {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .relaxation-section {
    padding: 2rem 0;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .section-intro {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
  
  .exercise-info {
    padding: 1.2rem;
  }
  
  .timer-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .primary-btn,
  .secondary-btn {
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }
  
  .close-btn {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
}
</style>